<template>
  <div class="container dark-theme">
    <!-- 头部导航栏 -->
    <div class="header">
      <div class="back-button" @click="goBack">
        <i class="el-icon-arrow-left"></i> 返回
      </div>
      <div class="title">购物车</div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 购物车列表 -->
      <div class="cart-list" v-if="cartItems.length > 0">
        <div v-for="item in cartItems" :key="item.id" class="cart-item">
          <el-checkbox v-model="item.selected"></el-checkbox>
          <div class="item-image">
            <img :src="item.image" :alt="item.name">
          </div>
          <div class="item-info">
            <h3>{{ item.name }}</h3>
            <div class="price">¥{{ item.price }}</div>
            <div class="quantity">
              <el-input-number 
                v-model="item.quantity" 
                :min="1" 
                :max="99"
                size="small"
                @change="updateTotal">
              </el-input-number>
            </div>
          </div>
          <div class="delete-btn" @click="removeItem(item)">
            <i class="el-icon-delete"></i>
          </div>
        </div>
      </div>

      <!-- 空购物车提示 -->
      <div class="empty-cart" v-else>
        <i class="el-icon-shopping-cart-2"></i>
        <p>购物车是空的</p>
        <el-button type="primary" @click="goShopping">去购物</el-button>
      </div>

      <!-- 底部结算栏 -->
      <div class="checkout-bar" v-if="cartItems.length > 0">
        <div class="select-all">
          <el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>
        </div>
        <div class="total-info">
          <span>合计：</span>
          <span class="total-price">¥{{ totalPrice }}</span>
        </div>
        <el-button type="primary" @click="checkout">结算({{ selectedCount }})</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Cart',
  data() {
    return {
      cartItems: [
        {
          id: 1,
          name: '智能手表',
          price: 1299,
          quantity: 1,
          selected: true,
          image: require('@/assets/product1.jpg')
        },
        {
          id: 2,
          name: '无线耳机',
          price: 899,
          quantity: 1,
          selected: true,
          image: require('@/assets/product2.jpg')
        }
      ]
    }
  },
  computed: {
    selectAll: {
      get() {
        return this.cartItems.every(item => item.selected)
      },
      set(value) {
        this.cartItems.forEach(item => item.selected = value)
      }
    },
    totalPrice() {
      return this.cartItems
        .filter(item => item.selected)
        .reduce((total, item) => total + item.price * item.quantity, 0)
    },
    selectedCount() {
      return this.cartItems.filter(item => item.selected).length
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    goShopping() {
      this.$router.push('/credit-business')
    },
    handleSelectAll(val) {
      this.cartItems.forEach(item => item.selected = val)
    },
    updateTotal() {
      // 更新总价的逻辑已经通过计算属性实现
    },
    removeItem(item) {
      const index = this.cartItems.indexOf(item)
      if (index > -1) {
        this.cartItems.splice(index, 1)
      }
    },
    checkout() {
      if (this.selectedCount === 0) {
        this.$message.warning('请选择要结算的商品')
        return
      }
      this.$message.success('订单提交成功！')
      this.$router.push('/credit-business')
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: radial-gradient(ellipse at center, #001e3c 0%, #000 100%);
  color: #fff;
  font-family: 'Microsoft YaHei', sans-serif;
}

.header {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #002d52;
}

.back-button {
  cursor: pointer;
  color: #4fc3f7;
  font-size: 16px;
}

.title {
  margin-left: 20px;
  font-size: 20px;
  font-weight: bold;
}

.main-content {
  padding: 20px;
  padding-bottom: 80px;
}

.cart-list {
  margin-bottom: 20px;
}

.cart-item {
  display: flex;
  align-items: center;
  background: rgba(0, 45, 82, 0.8);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.item-image {
  width: 80px;
  height: 80px;
  margin: 0 15px;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.item-info {
  flex: 1;
}

.item-info h3 {
  margin: 0 0 5px 0;
  font-size: 16px;
}

.price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.quantity {
  margin-top: 10px;
}

.delete-btn {
  color: #f56c6c;
  cursor: pointer;
  padding: 10px;
}

.empty-cart {
  text-align: center;
  padding: 40px 0;
  color: #b0bec5;
}

.empty-cart i {
  font-size: 48px;
  margin-bottom: 20px;
}

.empty-cart p {
  margin-bottom: 20px;
}

.checkout-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background: #002d52;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.select-all {
  margin-right: 20px;
}

.total-info {
  flex: 1;
  text-align: right;
  margin-right: 20px;
}

.total-price {
  color: #f56c6c;
  font-size: 20px;
  font-weight: bold;
}

:deep(.el-checkbox__label) {
  color: #fff;
}

:deep(.el-input-number__decrease),
:deep(.el-input-number__increase) {
  background: #003b64;
  border-color: #4fc3f7;
  color: #4fc3f7;
}

:deep(.el-input-number__input) {
  background: #003b64;
  border-color: #4fc3f7;
  color: #fff;
}

.el-button {
  padding: 12px 30px;
}

.el-button--primary {
  background: #003b64;
  border: 1px solid #4fc3f7;
  color: #4fc3f7;
}

.el-button--primary:hover {
  background: #4fc3f7;
  color: #fff;
}
</style> 